<template>
  <div class="ui-affix" :class="[showTitle ? '': 'ui-affix-notitle', flagClass]" :style="bodyStyle">
    <!-- 通话详情里面的那条线 -->
    <span class="ui-title" v-if="showTitle">
      <b class="title"><i class="square"></i>{{ label }}
        <span v-if="monitor">
          <span class="opt" @click="open('open')" v-if="!showFlag"><i class="iconfont icon-biyan"></i></span>
          <span class="opt" @click="open('close')" v-if="showFlag"><i class="iconfont icon-zhengyan"></i></span>
        </span>
        <span v-if="quality">
          <span class="fold" @click="spreadClickFun(true)" v-show="!qualityBool"><i class="iconfont icon-zhijianxiangqingshouqi"></i>{{$t('report.unfoldedContition')}} </span>
          <span class="fold rotate" @click="spreadClickFun(false)" v-show="qualityBool"><i class="iconfont icon-zhijianxiangqingshouqi"></i>{{$t('report.foldedContition')}} </span>
        </span>
        <slot name="questionSlot"></slot>
      </b>
    </span>
    <slot></slot>
  </div>
</template>
<script>
  export default {
    name: 'Affix',
    props: {
      quality: Boolean,
      monitor: Boolean,
      label: String,
      moniterFlag: String,
      showFlag: Boolean,
      showTitle: {type: Boolean, default: true},
      flagClass: {type: String, default: ''},
      bodyStyle: {type: Object, default: function () { return {} }}
    },
    methods: {
      spreadClickFun (bool) {
        this.qualityBool = !this.qualityBool
        this.$emit('isFold', bool)
      },
      open (flag) {
        if (flag === 'open') {
          this.$emit('open', {moniterFlag: this.moniterFlag, flag: true})
        } else {
          this.$emit('open', {moniterFlag: this.moniterFlag, flag: false})
        }
      }
    },
    data () {
      return {
        qualityBool: false
      }
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../assets/common.styl"
.ui-affix
  position relative
  margin-top 12px
  padding  18px 20px 27px 20px
  &:after
    content ''
    border-top 1px dotted $c-border2
    height 1px
    width 100%
    position absolute
    top -4px
    left 0
  .opt
    color $c-main
    cursor pointer
  .fold
    font-weight 400
    color $c-main
    cursor pointer
    display inline-block
    font-size 12px
    .iconfont
      display inline-block
      transform rotate(90deg)
      margin 0 6px 0 10px
  .rotate
    .iconfont
      display inline-block
      transform rotate(-90deg)
  .ui-title
    position absolute
    top -13px
    left 0
    display block
    width 100%
    .title
      position absolute
      background-color $cf-white
      padding-right 10px
      z-index 1
      color $cf-gray3
      font-size 14px
      &:before
        content ''
        display inline-block
        width 12px
        height 12px
        background-color $c-affix
        margin-right 8px
.ui-affix-notitle
  padding 0
  &:after
    content ''
    border-top none
.ui-affix.webchat-affix
  padding-left 0
  padding-right 0
  &:after
    border none
  .title
    &:before
      display inline
      margin 0
</style>
